// import {React} form  'react'
import React, { useEffect, useState } from "react";

import "../addIntelligent_lighting/AddIntelligent_lighting.scss";
import "../../../static/font/iconfont.css";
import { AddBuildingMap } from "../AddBuildingMap/AddBuildingMap";
import getLocalTime from "../../../utils/getLocalTime";
import store from "../../../store";
// import moment from "moment";

import { Form, Input, Button, Select, Modal, Upload } from "antd";
import { ExclamationCircleOutlined, InboxOutlined } from "@ant-design/icons";
import ImgCrop from "antd-img-crop";
import http from "../../../utils/http";

const { Option } = Select;
const { confirm } = Modal;
export const Sbxq = (props) => {
    // Reflect.set(formData, "receiptDate", moment(formData.receiptDate));
    // 获取存在mobx中的数据
    // function getLocalTime(n) {
    //     return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/, " ");
    // }
    console.log(store.qintianyong.b);
    const [form] = Form.useForm();
    const [formData] = Form.useForm();
    // const [newData, setData] = useState();
    let sbArr = store.qintianyong.Sbxq;
    useEffect(() => {
        http({
            url: "/device/deviceDetails",
            method: "post",
            params: {
                dinfId: sbArr.key,
            },
        }).then((res) => {
            console.log(res.data);
            if (res.data.dinfId == sbArr.key) {
                // let time = getLocalTime(res.data.dinfUpdate);
                formData.setFieldsValue({
                    ddetName: res.data.ddetName,
                    ddetNumber: res.data.ddetNumber,
                    ddetType: res.data.ddetType,
                    dinfUpdate: getLocalTime(res.data.ddetFactorydate),
                    dinfState: res.data.dinfState,
                    adminName: res.data.adminName,
                    adminPhone: res.data.adminPhone,
                });
            }
            // formData.resetFields();
        });
    }, []);
    // 取数据
    // console.log(store.qintianyong.b);

    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 14,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    // 上传图片
    const normFile = (e) => {
        console.log("Upload event:", e);

        if (Array.isArray(e)) {
            return e;
        }

        return e && e.fileList;
    };
    //返回页面
    const backCar = () => {
        props.setSbxq(false);
    };
    const quxiao = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: "您确定离开此页面吗？",
            cancelText: "取消",
            okText: "确定",
            onOk() {
                //   console.log('OK');
                backCar();
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };
    const onFinish = (values) => {
        console.log(values);
    };

    return (
        <div id="Zmdetails">
            <div className="xinzeng">
                <div>
                    <div className="tit1">
                        <div>
                            <div>
                                <div></div>
                                <div>设备管理详情</div>
                            </div>
                        </div>
                        <div>
                            <span
                                className="iconfont icon-a-16guanbi"
                                onClick={backCar}
                            ></span>
                        </div>
                    </div>
                    <hr></hr>
                    <div className="content">
                        <div>
                            <p>基本设备信息:</p>
                            <Form
                                {...layout}
                                form={formData}
                                name="control-hooks"
                                onFinish={onFinish}
                                initialValues={formData}
                            >
                                <Form.Item
                                    name="ddetName"
                                    label="设备名称"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="ddetNumber"
                                    label="设备编号"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="ddetType"
                                    label="设备类型"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Select placeholder="" allowClear>
                                        <Option value="1">1</Option>
                                        <Option value="2">2</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name="dinfUpdate"
                                    label="运行时间"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                    {/* <DatePicker className="width_centent" /> */}
                                </Form.Item>
                                <Form.Item
                                    name="dinfState"
                                    label="运行状态"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Select placeholder="" allowClear>
                                        <Option value="正常">正常</Option>
                                        <Option value="异常">异常</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name="adminName"
                                    label="跟进人"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="adminPhone"
                                    label="联系方式"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <p>设备详细信息:</p>
                            <div>
                                <div>
                                    <Form
                                        {...layout}
                                        form={form}
                                        name="control-hooks"
                                        onFinish={onFinish}
                                    >
                                        <Form.Item
                                            name="carBrand"
                                            label="安装位置"
                                            // rules={[
                                            //     {
                                            //         required: true,
                                            //     },
                                            // ]}
                                        >
                                            <Input />
                                        </Form.Item>
                                        <Form.Item>
                                            {/* <div className="ditu">
                                                <AddBuildingMap />
                                            </div> */}
                                        </Form.Item>
                                    </Form>
                                </div>
                                <div>
                                    <Form
                                        {...layout}
                                        form={form}
                                        name="control-hooks"
                                        onFinish={onFinish}
                                    >
                                        <Form.Item
                                            label="现场照片"
                                            name="dinf_livephoto"
                                            // rules={[{ required: true }]}
                                        >
                                            <Form.Item
                                                name="dragger"
                                                valuePropName="fileList"
                                                getValueFromEvent={normFile}
                                                noStyle
                                            >
                                                <Upload.Dragger
                                                    name="files"
                                                    action="/upload.do"
                                                >
                                                    <p className="ant-upload-drag-icon">
                                                        <InboxOutlined />
                                                    </p>
                                                </Upload.Dragger>
                                            </Form.Item>
                                        </Form.Item>
                                        <Form.Item
                                            label="设备照片"
                                            name="dinf_devicephoto"
                                            // rules={[{ required: true }]}
                                        >
                                            <Form.Item
                                                name="dragger"
                                                valuePropName="fileList"
                                                getValueFromEvent={normFile}
                                                noStyle
                                            >
                                                <Upload.Dragger
                                                    name="files"
                                                    action="/upload.do"
                                                >
                                                    <p className="ant-upload-drag-icon">
                                                        <InboxOutlined />
                                                    </p>
                                                </Upload.Dragger>
                                            </Form.Item>
                                        </Form.Item>
                                    </Form>
                                    <div>
                                        <Form>
                                            <Form.Item {...tailLayout}>
                                                <div className="btntss">
                                                    <Button
                                                        type="primary"
                                                        htmlType="submit"
                                                    >
                                                        保存
                                                    </Button>
                                                    <Button onClick={quxiao}>
                                                        取消
                                                    </Button>
                                                </div>
                                            </Form.Item>
                                        </Form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default Sbxq;
